<template>
	<view>
		<!-- 未登录 -->
		<view class="out-border-line flex-row" style="padding: 30rpx;" v-if="!isAlreadyLogin" @click="turnLogin()">
			<view class="avatarUrl-border">
				<image src="/static/tabbar/avatar_url.png"></image>
			</view>
			<view class="top-right-box">
				<view class="title-box" >
					<text style="font-weight: bold;">用户注册/登录</text>
				</view>
				<text class="tips-text">点击解锁新功能，带你用脚丈量这个世界。</text>
			</view>
		</view>
		<!-- 已登录 -->
		<view class="out-border-line flex-row" style="padding: 30rpx;" v-if="isAlreadyLogin" @click="turnUserInfo()">
			<view class="avatarUrl-border">
				<open-data type="userAvatarUrl" class="avatarUrl-img"></open-data>
			</view>
			<view class="top-right-box">
				<view class="title-box">
					<text style="font-weight: bold;">{{userInfo.nickName}}</text>
				</view>
				<block class="turn-baseInfo-box">
					<text class="tips-text">账号：{{userInfo.phone}}</text>
						<image src="/static/center/turnBaseInfo.png" class="img" style="margin-left: 27%;"></image>
						<image src="/static/center/turnRight.png" class="img2"></image>
				</block>
			</view>
		</view>
		<view class="out-border-line">
			<view class=" width-95-right flex-just">
				<image src="/static/center/tongzhi.png" class="width-95-right-image"></image>
				<view class="right-text-box">
					<view class="right-in-box">
						<text class="image-right-text">消息通知</text>
						<image src="/static/center/turnRight.png" v-if="isAlreadyLogin" class="right-text-box-image"></image>
					</view>
				</view>
			</view>
			<view class="width-95-right flex-just"  @click="noOpen()">
				<image src="/static/center/xiansuoS.png" class="width-95-right-image"></image>
				<view class="right-text-box">
					<view class="right-in-box">
					<text class="image-right-text">我的足迹</text>
					<image src="/static/center/turnRight.png" v-if="isAlreadyLogin" class="right-text-box-image"></image>
					</view>
				</view>
			</view>
			<view class="width-95-right flex-just" @click="turnOrderRecord()">
				<image src="/static/center/dingdanS.png" class="width-95-right-image"></image>
				<view style="width: 85%;">
					<view class="right-in-box">
					<text class="image-right-text">订购记录</text>
					<image src="/static/center/turnRight.png" v-if="isAlreadyLogin" class="right-text-box-image"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="out-border-line"  @click="noOpen()">
			<view class="width-95-right flex-just">
				<image src="/static/center/chanpinzhongxinS.png" class="width-95-right-image"></image>
				<view style="width: 85%;" class="flex-just">
					<view class="right-in-box">
					<text class="image-right-text">帮助反馈</text>
					<image src="/static/center/turnRight.png" v-if="isAlreadyLogin" class="right-text-box-image"></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getUserInfo
	} from '@/common/api/quickRegister/quickRegister.js'
	export default {
		data() {
			return {
				isAlreadyLogin: false,
				userInfo: {}
			}
		},
		methods: {
			// 当返回不是200时报网络错误的错或者作出什么提示
			netError: function(title, icon) {
				uni.showToast({
					title: title,
					icon: icon,
					mask: true,
					duration: 1000
				})
			},
			// 跳转到快速注册
			turnLogin:function(){
				uni.navigateTo({
					url: '/pages/login/phoneLogin/phoneLogin'
				})
			},
			// 获取登录者的用户信息
			getUserInfo: function(){
				getUserInfo().then(res => {
					if(res.data.code == 200) {
						if(res.data.data != null) {
							this.userInfo = res.data.data.info
							uni.setStorageSync("memberId",res.data.data.info.id)
						}
					} else {
						this.netError("网络错误", 'none')
					}
				})
			},
			// 跳转到用户信息页面
			turnUserInfo:function() {
				uni.navigateTo({
					url: '/pages/center/userInfo/userInfo'
				})
			},
			// 暂未开放
			noOpen:function(){
				uni.showToast({
					title: '暂无开放',
					icon: 'none'
				})
			},
			// 跳转到订单记录
			turnOrderRecord:function(){
				uni.navigateTo({
					url: '/pagesA/pages/groceryStore/orderRecord/orderRecord'
				})
			},
		},
		onLoad() {
			this.isAlreadyLogin = uni.getStorageSync('isAlreadyLogin');
			this.getUserInfo()
		}
	}
</script>

<style>
	.avatarUrl-border image {
		width: 95%;
		height: 95%;
		margin: 3%;
	}

	.top-right-box {
		width: 70%;
		height: 100%;
		margin: 0 auto;
		margin-left: 7%;
		margin-top: 20rpx;
	}

	/* 已登录时用户名下的布局 */
	.turn-baseInfo-box {
		width: 90%;
		display: flex;
		justify-content: space-between;
	}
	.img-box{
		width: 30%;
		margin-left: 5%;
	}
	.img {
		width: 50rpx;
		height: 50rpx;
		vertical-align: middle;
	}
	.img2{
		width:33rpx;
		height: 33rpx;
		vertical-align: middle;
		margin-left: 10rpx;
	}

	.width-95-right-image {
		width: 30px;
		height: 30px;
		margin-top: 15rpx;
		vertical-align: middle;
		margin-right: 5%;
	}

	.right-text-box {
		width: 85%;
		height: 90rpx;
		border-bottom: 1px solid #E3E3E3;
	}
	.right-in-box{
		width:93%;
		height:100%;
		display: flex;
		justify-content: space-between;
	}

	.image-right-text {
		width: 100%;
		height: 90rpx;
		line-height: 90rpx;
		font-size: 16px;
		margin-right: 5%;
	}
	
	.right-text-box-image {
		width: 40rpx;
		height:40rpx;
		vertical-align: middle;
		margin-top: 25rpx;
	}
	
	.flex-just {
		display: flex;
		justify-content: space-between;
	}
</style>
